<template>
	<view class="evaluate">
		<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx 40rpx'" :padding="0">
			<view class="ev-list">
				<image class="ev-l-img" :src="avatar" mode=""></image>
				<view class="ev-l-con">
					<view class="ev-l-title">
						<text class="ev-l-name">{{name}}</text>
						<view class="ev-l-info" @click="store">
							<text class="ev-l-text">收藏</text>
							<image class="ev-l-ioc" :src="collection?shouchangXZ:shouchang" mode="aspectFit"></image>
						</view>
					</view>

					<view class="ev-l-con-tousu">
						<text class="ev-l-text1">清洁时间：{{time || ''}}</text>
						<view class="l-c-end" @click="accuse">
							<text>违规投诉</text>
						</view>
					</view>
				</view>
			</view>
			<view class="ev-rate">
				<uni-rate :value="rateVal" :touchable="false" :margin="10" :size="32" @change="onChange" color="#FFE9BB"
					active-color="#FEAD1D" />
				<!-- <uni-rate :touchable="false" :value="rateVal" @change="onChange" /> -->
			</view>
			<view class="ev-check">
				<uni-data-checkbox mode="tag" :map="{text:'lable_name',value:'id'}" multiple v-model="checkbox"
					@change="tagClick" :localdata="hobby[rateVal - 1]"></uni-data-checkbox>
			</view>
			<view class="ev-input">
				<uni-easyinput :clearable="false" type="textarea" v-model="value" placeholderStyle="font-size: 28rpx"
					placeholder="服务怎么样,说说您的感受吧" @input="inpuClick"></uni-easyinput>
			</view>
		</uni-card>
		<button class="ev-but" plain @click="subEvaluate">提交评价</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				shouchang: `${getApp().globalData.imgScr}jd/shouchang.png`,
				shouchangXZ: `${getApp().globalData.imgScr}jd/shouchang_xz.png`,
				id: '', // 订单id
				uid: '', // 保洁id
				type: '', // 保洁类型
				avatar: '', // 服务员头像
				name: '', // 服务员姓名
				time: '', // 清洁时间
				label: '', // 标签内容
				collection: '', // 收藏状态
				rateVal: 5,
				checkbox: [],
				hobby: [],
				value: '',
				stores: false,
				order_id: 0,
				cleaner_id: 0,
				url: '/hotelAdmin/indent', // 公共的二级页面路径地址
			}
		},
		async onLoad(res) {
			console.log('res', res)
			this.id = res.id
			this.order_id = res.order_id
			this.cleaner_id = res.cleaner_id
			this.cleaner_type = res.cleaner_type
			try {
				let reo = await this.$http.post('/index/Hotelorder/evaluateinfo', {
					order_id: res.order_id,
					cleaner_id: res.cleaner_id
				})
				this.uid = reo.cleaner_id
				this.type = reo.order_type === 1 ? '1' : '2'
				this.avatar = reo.avatar
				this.name = reo.real_name || reo.nickname
				this.time = reo.hotel_pay_time
				this.collection = reo.collection
				let rep = await this.$http.get('/index/Hotelorder/label')
				this.hobby = rep

			} catch (e) {
				uni.showToast({
					title: e.errMsg,
					icon: "none"
				})
			}
		},
		methods: {
			/**
			 * 收藏事件
			 */
			async store() {
				try {
					let res = await this.$http.post('/index/Hotelorder/collection', {
						cleaner_id: this.cleaner_id,
						cleaner_type: this.cleaner_type
					})
					this.collection = !this.collection
					if (this.collection) {
						uni.showToast({
							title: "收藏成功",
							icon: "none"
						})
					} else {
						uni.showToast({
							title: "取消收藏",
							icon: "none"
						})
					}
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}

			},
			/** 当评分按钮的值发生变化时触发
			 * @param {Object} e 改变 value 的值返回 e = { value:number }
			 */
			onChange(e) {
				this.rateVal = e.value
			},
			/**
			 * 输入框内容发生变化时触发
			 * @param {string} e 输入框输入的值
			 */
			inpuClick(e) {
				this.value = e
			},
			/**
			 * 标签选择触发
			 * @param {Object} e 标签的值发生变化后的数据
			 */
			tagClick(e) {
				let arr = e.detail.data.map(item => item.lable_name)
				this.label = arr.join(',')
			},
			async subEvaluate() {
				try {
					if (!this.value) return uni.showToast({
						title: "评价内容不能为空！",
						icon: "none"
					})
					let res = await this.$http.post('/index/Hotelorder/evaluate', {
						order_id: this.order_id,
						cleaner_id: this.cleaner_id,
						content: this.value,
						star: this.rateVal,
						label: this.label
					})
					uni.navigateBack({
						delta: 1
					});
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}
			},
			accuse() {
				let path = this.url + '/accuse/accuse?id=' + this.order_id
				uni.navigateTo({
					url: path
				});
			},
		}
	}
</script>

<style lang="scss">
	.evaluate {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.uni-card {
			border-radius: 20rpx;
			overflow: hidden;
		}

		.ev-list {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.ev-l-img {
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
			}

			.ev-l-con {
				flex: 1;
				height: 100rpx;
				display: flex;
				flex-direction: column;

				&-tousu {
					display: flex;
					justify-content: space-between;

					.l-c-end {
						width: 120rpx;
						height: 38rpx;
						line-height: 38rpx;
						background-color: rgba(83, 227, 140, .1);
						border-radius: 38rpx;
						text-align: center;

						text {
							color: #54E48C;
							font-size: 24rpx;
						}
					}
				}

				.ev-l-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 10rpx;

					.ev-l-name {
						font-size: 28rpx;
						font-weight: bold;
						color: #000000;
					}

					.ev-l-info {
						.ev-l-text {
							font-size: 28rpx;
							font-weight: 500;
							color: #000000;
							margin-right: 16rpx;
						}

						.ev-l-ioc {
							width: 32rpx;
							height: 32rpx;
							vertical-align: middle;
						}
					}
				}

				.ev-l-text1 {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba($color: #000000, $alpha: 0.5);
				}
			}
		}

		.ev-rate {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 120rpx;
		}

		.ev-check {
			margin: 20rpx 0;

			.uni-data-checklist {
				.checklist-group {
					width: calc(100% + 20rpx);

					.checklist-box {
						box-sizing: border-box;
						border: 0;
						margin: 0 10rpx 20rpx 0;
					}

					.is-checked {
						background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
					}
				}

			}
		}

		.ev-input {
			margin-bottom: 20rpx;

			.uni-easyinput__content-textarea {
				height: 400rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
			}
		}

		.ev-but {
			width: calc(100% - 40rpx);
			font-size: 34rpxs;
			line-height: 80rpx;
			color: #FFFFFF;
			border: 0;
			border-radius: 40rpx;
			background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
			margin: 40rpx auto;
		}
	}
</style>
